<template lang="html">
  <div class="m-search">
    <ul>
      <li @click="showCityList">
        <span>{{cityName || '全国'}}</span><i class="yo-ico">&#xf032;</i>
      </li>
      <li>
        <input type="text" v-model="positionName" @keyup.enter="doSearch" placeholder="搜索职位或公司" />
      </li>
      <li class="yo-ico">&#xf067;</li>
    </ul>
    <div class="custominfo">
      将搜索地区和关键词设为定制条件
    </div>
    <position-list :on-send-id="handleSendId" :is-show-loading="isShowloading" :data-list="dataList">
    </position-list>
    <div id="example-5">
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option value="AA">A</option>
        <option value="BB">B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
  </div>
</template>

<script>
import PositionList from '../components/PositionList.vue'
// import axios from 'axios'
import axiosUtil from '../utils/axios.util.js'
export default {
  data() {
    return {
      cityName: this.$route.query.cityName || '全国',
      positionName: '',
      dataList: [],
      isShowloading: true,
      selected: ''
    }
  },
  components: {
    PositionList
  },
  methods: {
    showCityList() {
      this.$router.push('/city')
      this.$store.commit('changeCity', this.cityName)
    },
    doSearch() {
      axiosUtil(this, `/api/search.json?city=${this.cityName}&positionName=${this.positionName}&pageNo=1&pageSize=15`)
      this.positionName = ''
    },
    handleSendId(id) {
      console.log(id);
    }
  },
  computed: {

  },
  mounted() {
    axiosUtil(this, `/api/search.json?city=${this.cityName}&positionName=${this.positionName}&pageNo=1&pageSize=15`)
    this.$store.commit('changeIndex', 1)
    this.$store.commit('xxx', ajax())
  }
}
</script>
